<template>
  <div class="container" ref="mainCon">
    <div class="reminder" v-if="hasRule">
      <i class="el-icon-warning"></i>
      项目尚未设置打卡规则，务工人员暂时无法正常打卡。
    </div>
    <topTitle
      :titleText="titleText"
      :titleExplain="titleExplain"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon noTitleExplain" :class="{ top: !hasRule }">
      <div class="hasRule" v-show="!hasRule">
        <el-col class="btnBox">
          <!-- <el-button icon="icon iconfont iconfanhui" class="commonBtn"  @click="goBack"></el-button> -->
          <el-button
            class="commonBut saveBtn"
            icon="icon iconfont icontianjia"
            @click="addPunchCardRule"
            v-hasBtn="'csAtt:add'"
          >
            <span class="opetareText">添加新规则</span>
          </el-button>
        </el-col>
        <div
          ref="tableBox"
          :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
        >
          <el-table
            ref="tableBox1"
            :max-height="tableHeight"
            :data="punchCardRuleList"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            v-loading="loading"
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column prop="name" label="规则名称">
              <template slot-scope="scope">
                <div v-if="scope.row.isDefault == '1'">
                  默认打卡点
                  <el-tooltip
                    content="Right center"
                    placement="right"
                    effect="dark"
                  >
                    <div slot="content">
                      默认打卡点仅用于关联打卡设备，不可修改
                    </div>
                    <i class="icon iconfont iconhuabanfuben"></i>
                  </el-tooltip>
                </div>
                <div v-else>{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="打卡地点">
              <template slot-scope="scope">
                <div v-if="scope.row.isDefault == '1'">
                  无打卡地址 - <span style="color: #999">100米内</span>
                </div>
                <div v-else>
                  {{ scope.row.address }} -
                  <span style="color: #999">{{ scope.row.range }} 米内 </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              fixed="right"
              width="200"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.name == '默认打卡点'">-</div>
                <div v-else>
                  <el-link
                    type="primary"
                    v-hasBtn="'csAtt:update'"
                    @click.stop="handleEdit(scope.$index, scope.row)"
                    >修改</el-link
                  >
                  <el-link
                    type="primary"
                    v-hasBtn="'csAtt:delete'"
                    @click.stop="handleDelete(scope.$index, scope.row)"
                    >删除</el-link
                  >
                  <!-- <i class="icon iconfont iconbianji tabIcon editIcon" v-hasBtn="'csAtt:update'" @click.stop="handleEdit(scope.$index, scope.row)"></i>
              <i class="icon iconfont iconshanchu tabIcon delIcon" v-hasBtn="'csAtt:delete'" @click.stop="handleDelete(scope.$index, scope.row)"></i> -->
                </div>
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable></emptyTable>
            </div>
          </el-table>
          <!-- filterField为搜索条件 -->
          <!-- getTableList为获取子组件的数据 -->
          <Pagination
            ref="pagination"
            :filterField="filterField"
            @getList="getTableList"
            :requestUrl="requestUrl"
          ></Pagination>
        </div>
        <el-col class="btnContainer">
          <el-button class="commonBut" @click="toQyConstructAttendanceContainer"
            >返回</el-button
          >
        </el-col>
      </div>
      <div v-show="hasRule" class="noRule">
        <img src="../../../static/img/attendance/noHasRule.png" alt="" />
        <p style="margin-bottom: 50px">暂无打卡规则</p>
        <el-col class="btnContainer">
          <el-button class="commonBut saveBtn" @click="addPunchCardRule"
            >添加打卡规则</el-button
          >
          <el-button class="commonBut" @click="toQyConstructAttendanceContainer"
            >返回</el-button
          >
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'constructPunchCardRuleList',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '打卡规则设置',
      titleExplain: '添加班组时，可选择已设置的考勤规则',
      back: true,
      requestUrl: 'api-att/cs/point/expand/list',
      filterField: {
        projectId: '',
      },
      punchCardRuleList: [],
      // isShowPagination: false,
      hasRule: false,
      loading: true,
      isShow: false,
      projectId: '',
    }
  },
  created() {
    this.$store.commit(
      'set_active_index',
      '/home/constructAttendance/qyConstructAttendanceContainer'
    )
    this.$store.state.activeMenu =
      '/home/constructAttendance/qyConstructAttendanceContainer'
    this.$store.commit('GOBACK_NAME', {
      oldUrl: '/home/constructAttendance/qyConstructAttendanceContainer',
      newUrl: this.$router.currentRoute.fullPath,
    })

    this.projectId = this.$route.query.projectId

    this.filterField.projectId = this.projectId

    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getTableList(data) {
      this.punchCardRuleList = data
      this.hasRule = this.punchCardRuleList.length < 1 ? true : false
      this.loading = false
    },
    //编辑
    handleEdit(index, row) {
      this.$router.push({
        path: '/home/constructAttendance/constructAddPunchCardRule',
        name: 'constructAddPunchCardRule',
        query: {
          id: row.id,
          name: row.name,
          type: 'edit',
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/constructAttendance/qyConstructAttendanceContainer',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //删除
    handleDelete(index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.toDel(row.id)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    toDel(id) {
      this.axios({
        method: 'post',
        url: 'api-att/cs/pointframe/expand/delete',
        data: {
          pointId: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message({
                message: response.data.errorMsg || response.data.msg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    addPunchCardRule() {
      this.$router.push({
        path: '/home/constructAttendance/constructAddPunchCardRule',
        name: 'constructAddPunchCardRule',
        query: {
          projectId: this.projectId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/constructAttendance/qyConstructAttendanceContainer',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toQyConstructAttendanceContainer() {
      this.$router.push(
        '/home/constructAttendance/qyConstructAttendanceContainer'
      )
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/constructAttendance/qyConstructAttendanceContainer',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      this.$router.push(
        '/home/constructAttendance/qyConstructAttendanceContainer'
      )
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/constructAttendance/qyConstructAttendanceContainer',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  height: calc(100% - 116px);
}
.topCon {
  border-bottom: 1px solid #e3e7e9;
}
.top {
  top: 210px;
}
/deep/ .topTitle p {
  // margin-left: 30px;
  &:after {
    content: '';
  }
}

.btnContainer {
  text-align: center;
  margin: 10px 0;
}

.btnBox {
  padding: 0 24px 24px;
}

.noRule {
  text-align: center;
  img {
    margin: 60px 0;
  }
}

// 页面提示
.reminder {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 24px;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
  .el-link {
    vertical-align: baseline;
  }
}
</style>
